<template>
  <div class="SubjectThree">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>驾培服务</el-breadcrumb-item>
      <el-breadcrumb-item><span class="fs14 bold">科目三</span></el-breadcrumb-item>
    </el-breadcrumb>

    <div class="common-operate-box">
      <el-form class="form-wrap flexMultiWrap">
        <FormWithLabel label="客户姓名">
          <el-input v-model="tmpData.car" placeholder="客户姓名"></el-input>
        </FormWithLabel>
        <FormWithLabel label="客户编号">
          <el-input v-model="tmpData.ground" placeholder="客户编号"></el-input>
        </FormWithLabel>
        <FormWithLabel label="手机">
          <el-input v-model="tmpData.newGround" placeholder="精确匹配"></el-input>
        </FormWithLabel>
        <FormWithLabel label="身份证">
          <el-input v-model="tmpData.newGround" placeholder="精确匹配"></el-input>
        </FormWithLabel>
        <FormWithLabel label="考试次数">
          <el-input v-model="tmpData.newGround" placeholder="考试次数"></el-input>
        </FormWithLabel>
        <FormWithLabel label="考试日期">
          <el-date-picker
            v-model="tmpData.newGround" placeholder="考试日期"
            dateType="time">
          </el-date-picker>
        </FormWithLabel>
        <FormWithLabel label="专属客服">
          <el-input v-model="tmpData.newGround" placeholder="模糊查找"></el-input>
        </FormWithLabel>
        <FormWithLabel label="是否转场学员">
          <el-select v-model="tmpData.status" placeholder="全部">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </FormWithLabel>
        <FormWithLabel label="专属教练">
          <el-select v-model="tmpData.status" placeholder="全部">
            <el-option label="张三" :value="1"></el-option>
            <el-option label="李四" :value="0"></el-option>
          </el-select>
        </FormWithLabel>
        <FormWithLabel label="产品名称">
          <el-input v-model="tmpData.newGround" placeholder="模糊查找"></el-input>
        </FormWithLabel>
        <FormWithLabel label="训练场">
          <el-input v-model="tmpData.newGround" placeholder="请选择训练场"></el-input>
        </FormWithLabel>
        <FormWithLabel label="学籍驾校">
          <el-input v-model="tmpData.newGround" placeholder="请选择学籍驾校"></el-input>
        </FormWithLabel>
        <FormWithLabel label="补考费">
          <el-select v-model="tmpData.status" placeholder="全部">
            <el-option label="没欠" :value="1"></el-option>
            <el-option label="拖欠" :value="0"></el-option>
          </el-select>
        </FormWithLabel>
        <FormWithLabel label="申请考试日期" slotWidth="314px">
          <el-date-picker
            v-model="tmpData.newGround" placeholder="开始日期"
            dateType="time">
          </el-date-picker>
          至
          <el-date-picker
            v-model="tmpData.newGround" placeholder="结束日期"
            dateType="time">
          </el-date-picker>
        </FormWithLabel>
        <FormWithLabel label="实际考试日期" slotWidth="314px">
          <el-date-picker
            v-model="tmpData.newGround" placeholder="开始日期"
            dateType="time">
          </el-date-picker>
          至
          <el-date-picker
            v-model="tmpData.newGround" placeholder="结束日期"
            dateType="time">
          </el-date-picker>
        </FormWithLabel>
        <FormWithLabel label="科二通过时间" slotWidth="314px">
          <el-date-picker
            v-model="tmpData.newGround" placeholder="开始日期"
            dateType="time">
          </el-date-picker>
          至
          <el-date-picker
            v-model="tmpData.newGround" placeholder="结束日期"
            dateType="time">
          </el-date-picker>
        </FormWithLabel>
        <FormWithLabel label="学费">
          <el-select v-model="tmpData.status" placeholder="全部">
            <el-option label="欠费" :value="1"></el-option>
            <el-option label="全额" :value="0"></el-option>
          </el-select>
        </FormWithLabel>
      </el-form>
      <div class="btn-line flexCenter mt30">
        <button class="btn-operate btn-style-main mr10">查询</button>
        <button class="btn-operate btn-style-tan mr10">重置</button>
        <button class="btn-operate btn-style-tan mr10">导入考试成绩</button>
        <button class="btn-operate btn-style-tan">导入考试时间</button>
      </div>
    </div>

    <div class="common-operate-box">
      <div>
        <div class="btn-line mb10">
          <button v-for="(item,index) in tabTitle[0]" class="mr10 label-straight wAuto plr10" :class='{ active: actviveName === item.name}' @click="tabPages(index, item.name)">
            {{item.name+item.peoNum}}
          </button>
        </div>
        <div v-show="showIndex===0">
          <button v-for="(item,index) in tabTitle[1]" class="btn-operate btn-style-main mr10 mb10 wAuto pl10 pr10" @click="traingStudent(index)">
            {{item.name}}
          </button>
        </div>
        <div v-show="showIndex===2">
          <button class="btn-operate btn-style-main mr10 mb10" @click="cancalExam">考试取消</button>
        </div>
        <div v-show="showIndex===3">
          <button
            v-for="(item,index) in tabTitle[2]" class="btn-operate btn-style-main mr10 mb10"
            @click="cadets(index)">
            {{item.name}}
          </button>
          <button class="btn-operate btn-style-green mr10">导出Excel</button>
        </div>
        <el-table :max-height="this.tableMaxHeight()" :data="tableData" border>
          <el-table-column
            v-if="showIndex==0 || showIndex==2 || showIndex==3"
            type="selection" header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="num" label="编号"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="customerNum" label="客户编号"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="customerName" label="客户姓名"
            header-align="center" align="center">
            <template slot-scope="scope">
              <div>
                <div class="c-btn-link">
                  <div @click="peoDetails($event)">{{scope.row.customerName}}</div>
                  <span @click="examManagement(1)">
                    <span @click="handleEdit(scope.$index)" v-show="showIndex!=0">考试管理</span>
                  </span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="arrears" label="欠费"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="sex" label="性别"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="regisDate" label="报名日期"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="subjectOnePassTime" label="科二通过时间"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="latesFollowUp" label="最新跟进"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="testTimes" label="考试次数"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="cellPhone" label="手机"
            header-align="center" align="center">
            <template slot-scope="scope">
              <div>
                {{scope.row.cellPhone}}
                <span class="c-btn-link">拨打</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="idName" label="身份证"
            header-align="center" align="center">
            <template slot-scope="scope">
              <div>
                {{scope.row.idName}}
                <span class="c-btn-link">获取</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="coach" label="专属教练"
            header-align="center" align="center">
            <template slot-scope="scope">
              {{scope.row.coach}}
              <div @click="coachDiolog(0)">
                <BtnTb @click="handleEdit(scope.$index)">设置</BtnTb>
              </div>
              <BtnTb @click="delSubThreeMes">清空</BtnTb>
            </template>
          </el-table-column>
          <el-table-column
            prop="reducibleTest" label="可约考"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="successExam" label="约考成功"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="latesTestTime" label="最近一次考试时间"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="latesTestachievement" label="最近一次考试成绩"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="delinquency" label="拖欠补考费"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="cipherNum" label="车管所账号"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="cipher" label="车管所密码"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="remainHours" label="剩余学时"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="department" label="项目部"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="productName" label="产品名称"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="drivingGround" label="训练场"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="drivingLicenseType" label="驾照类型"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="cadets" label="是否转场学员"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="customerService" label="专属客服"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="sale" label="销售"
            header-align="center" align="center">
          </el-table-column>
          <el-table-column
            prop="state" label="状态"
            header-align="center" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <SelfDialog
      :isShow="isDialogShow" :size="size" :titTxt="DialogShowTxt"
      @dialogConfirm="handleConfirm" @dialogCancel="handleCancel">
      <el-form class="form-wrap flexMultiWrap flexCenter diologTable" :model="tmpData">
        <div v-if="showDioTxt==0 || showDioTxt === 2" style="width: 100%">
          <div style="text-align: center" v-if="showDioTxt === 2" class="mb10">
            <div>客户姓名</div>
            <div>xxx</div>
          </div>
          <FormWithLabel label="训练场地">
            <el-input v-model="tmpData.newGround" placeholder=""></el-input>
          </FormWithLabel>
          <div>
            <el-radio v-model="radio" label="0">李力</el-radio>
            <el-radio v-model="radio" label="1">张大</el-radio>
          </div>
        </div>
        <div v-else-if="showDioTxt==1" class="flexMultiWrap">
          <FormWithLabel label="训练场">
            <el-select v-model="tmpData.status" placeholder="训练场1">
              <el-option label="训练场2" :value="1"></el-option>
              <el-option label="训练场3" :value="0"></el-option>
            </el-select>
          </FormWithLabel>
          <FormWithLabel label="教练">
            <el-select v-model="tmpData.status" placeholder="请选择">
              <el-option label="张三" :value="1"></el-option>
              <el-option label="李四" :value="0"></el-option>
            </el-select>
          </FormWithLabel>
          <FormWithLabel label="考场">
            <el-select v-model="tmpData.status" placeholder="广州科韵路">
              <el-option label="广州科韵路" :value="1"></el-option>
              <el-option label="广州科韵路" :value="0"></el-option>
            </el-select>
          </FormWithLabel>
          <FormWithLabel label="科目">
            <el-select v-model="tmpData.status" placeholder="科目一">
              <el-option label="科目一" :value="1"></el-option>
              <el-option label="科目一" :value="0"></el-option>
            </el-select>
          </FormWithLabel>
          <FormWithLabel label="网约时间">
            <el-date-picker
              v-model="tmpData.newGround" placeholder="网约时间"
              dateType="time">
            </el-date-picker>
          </FormWithLabel>
          <FormWithLabel label="考试时间">
            <el-date-picker
              v-model="tmpData.newGround" placeholder="考试时间"
              dateType="time">
            </el-date-picker>
          </FormWithLabel>
          <FormWithLabel label="考试时间段">
            <el-select v-model="tmpData.status" placeholder="上午">
              <el-option label="下午" :value="1"></el-option>
              <el-option label="晚上" :value="0"></el-option>
            </el-select>
          </FormWithLabel>
          <FormWithLabel label="考试成绩">
            <el-select v-model="tmpData.status" placeholder="请选择">
              <el-option label="科一合格" :value="1"></el-option>
              <el-option label="科二合格" :value="0"></el-option>
            </el-select>
          </FormWithLabel>
          <el-form-item label="备注" style="width: calc(100% - 20px)">
            <el-input type="textarea" v-model="tmpData.desc"></el-input>
          </el-form-item>
          <FormWithLabel label="是否联考">
            <el-select v-model="tmpData.status" placeholder="请选择">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </FormWithLabel>
        </div>
      </el-form>
    </SelfDialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import TableEdit from '@/mixins/TableEdit'
  import SelfDialog from '@/components/SelfDialog'

  export default {
    name: 'SubjectThree',
    components: {SelfDialog},
    mixins: [TableEdit],
    data () {
      return {
        tableData: [
          {
            num: '1',
            state: '科目三',
            cipher: '5656',
            customerNum: '105255',
            customerName: '张萨满',
            arrears: '555',
            sex: '男',
            regisDate: '2018-2-2',
            subjectOnePassTime: '2018-2-6',
            latesFollowUp: '电话不通',
            testTimes: '2',
            reducibleTest: '否',
            successExam: '否',
            latesTestTime: '2018-2-2',
            latesTestachievement: '66',
            delinquency: '无',
            cipherNum: '56565',
            remainHours: '22',
            department: '安息部',
            drivingGround: '粤兴训练场',
            drivingLicenseType: 'c1',
            cadets: '否',
            customerService: '站长',
            coach: '李但是',
            productName: '驾考无忧c1',
            cellPhone: '135****3366',
            idName: '121220***223636',
            sale: '李空间',
            customerDisNum: '1',
            customerDisName: '张三',
            customerDisGround: '方寸训练场',
            isEditing: false
          }
        ],
        DialogShowTxt: '', // 设置按钮标题
        radio: '', // 设置按钮单选
        tabTitle: [
          [
            {
              name: '在培学员',
              peoNum: 505
            },
            {
              name: '可约考学员',
              peoNum: 155
            },
            {
              name: '已预约考试学员',
              peoNum: 550
            },
            {
              name: '已约考学员',
              peoNum: 15
            },
            {
              name: '已通过学员',
              peoNum: 35
            }
          ],
          [
            {
              name: '教练点击可约考'
            },
            {
              name: '批量设置教练'
            }
          ],
          [
            {
              name: '考试合格'
            },
            {
              name: '考试不合格'
            },
            {
              name: '缺考'
            },
            {
              name: '考试取消'
            }
          ]
        ], // tab点击按钮
        showIndex: 0, // 当前显示的界面序号
        showDioTxt: 0, // 弹框显示具体内容
        actviveName: '在培学员',
        size: 'l',
        isdisabled: false
      }
    },
    methods: {
      peoDetails () {
        this.$router.push('/CustomerInformation')
      },
      // 科目二设置index=0
      coachDiolog (index) {
        this.DialogShowTxt = '设置科二教练'
        this.showDioTxt = index
        this.size = 'm'
        this.dialogOpen()
      },
      // 考试管理index=1
      examManagement (index) {
        this.DialogShowTxt = '添加考试'
        this.showDioTxt = index
        this.size = 'l'
        this.dialogOpen()
      },
      traingStudent (index) {
        if (index === 0) {
          this.$confirm('确定提交吗?', '教练点击可约考', {
            confirmButtonText: '确定',
            cancelButtonText: '关闭'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '清空成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已关闭'
            })
          })
        } else if (index === 1) {
          this.DialogShowTxt = '批量设置教练'
          this.showDioTxt = 2
          this.size = 'm'
          this.dialogOpen()
        }
      },
      delSubThreeMes () {
        this.$confirm('确定清空此学员的科目三教练信息?', '设置科三教练', {
          confirmButtonText: '清空',
          cancelButtonText: '关闭'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '清空成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已关闭'
          })
        })
      },
      cancalExam () {
        this.$confirm('确定提交吗?', '设置（考试取消）', {
          confirmButtonText: '确定',
          cancelButtonText: '关闭'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '清空成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已关闭'
          })
        })
      },
      cadets (index) {
        if (index === 0) {
          this.$confirm('确定提交吗?', '设置（考试合格）', {
            confirmButtonText: '确定',
            cancelButtonText: '关闭'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '提交成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已关闭'
            })
          })
        } else if (index === 1) {
          this.$confirm('确定提交吗?', '设置（考试不合格）', {
            confirmButtonText: '确定',
            cancelButtonText: '关闭'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '提交成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已关闭'
            })
          })
        } else if (index === 2) {
          this.$confirm('确定提交吗?', '设置（缺考）', {
            confirmButtonText: '确定',
            cancelButtonText: '关闭'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '提交成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已关闭'
            })
          })
        } else if (index === 3) {
          this.$confirm('确定提交吗?', '设置（取消考试）', {
            confirmButtonText: '确定',
            cancelButtonText: '关闭'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '提交成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已关闭'
            })
          })
        }
      },
      // 点击tab切换显示对应界面模块
      tabPages (indexNum, actTitle) {
        this.showIndex = indexNum
        this.actviveName = actTitle
      }
    }
  }
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
  .SubjectThree {
  }
</style>
